<!-- 账号设置 -->

<template>
  <div>
    <el-card style="margin: 15px 0 0 10px">
      <el-form label-width="auto" style="margin: 20px 0 0">
        <el-form-item label="头像:">
          <el-avatar :size="50" :src="FILE_BASE_URL + info.photo" />
          <el-upload
            class="avatar-uploader"
            action="http://123.57.237.81:8080/caresystem/api/upload/add"
            :method="'post'"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="onSuccess"
          >
            <el-button key="primary" text type="primary" style="margin-left: 20px">
              更换头像
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名:">{{ info.name }}</el-form-item>
        <el-form-item label="手机号:">{{ info.mobile }}</el-form-item>
        <el-form-item label="账号:">{{ info.username }}</el-form-item>
        <el-form-item label="密码:">
          <span>
            {{ info.pwd ? info.pwd.replace(/./g, "*") : "" }}
          </span>
          <div
            style="margin-left: 100px; font-size: 12px; color: rgb(117 165 234)"
            @click="dialogVisible = true"
          >
            修改密码
          </div>
        </el-form-item>
      </el-form>

      <ChangePwd
        v-if="dialogVisible"
        v-model="dialogVisible"
        :pwd="info.pwd"
        @success="
          dialogVisible = false;
          getAccountGetUserInfoAPI();
        "
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { accountGetUserInfoAPI, accountUpdatePhotoAPI } from "@/api/system/AccountSet/AccoutSet";
import { UploadProps, ElForm } from "element-plus";
import { CompressImage } from "@/utils/imageUtils";
import ChangePwd from "@/components/AccountSet/changePwd.vue";

const FILE_BASE_URL = "http://123.57.237.81:8080/caresystem/";

// 修改密码dialog
const dialogVisible = ref(false);

const info = ref<AnyObject>({
  photo: "",
  name: "",
  mobile: "",
  username: "",
  pwd: "",
});

// 头像上传之前回调函数
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (!["jpg", "jpeg", "png"].includes(rawFile.name.split(".").pop()!)) {
    ElMessage.error("上传头像图片格式不正确");
    return false;
  }
  if (rawFile.size > 1024 * 1024 * 10) {
    ElMessage.error("上传头像图片大小不能超过10M");
    return false;
  }

  let url = URL.createObjectURL(rawFile);
  return CompressImage(url, 200);
};

// 头像上传成功回调函数
const onSuccess = async (event: AnyObject) => {
  await accountUpdatePhotoAPI({ photo: event.data.url }).then((res) => {
    info.value.photo = res.photo;
    ElMessage.success("修改成功");
  });
};

// 个人信息
const getAccountGetUserInfoAPI = () => {
  accountGetUserInfoAPI().then((res) => {
    info.value = res;
  });
};

onMounted(() => {
  getAccountGetUserInfoAPI();
});
</script>

<style></style>
